<template>
  <div class="my-user-info-body">
    <div class="my-user-center">
      <div class="my-user-left">
        <ul class="my-user-menu-ul">
          <li
            v-for="(item, index) in menulist"
            :key="item.id"
            :class="currentindex == index ? 'chooseindex' : ''"
            @click="chooseitem(index)"
          >
            <router-link :to="item.routeraddress">{{
              item.routername
            }}</router-link>
          </li>
        </ul>
      </div>
      <router-view class="my-user-center-right"></router-view>
    </div>
    <bottom-view></bottom-view>
  </div>
</template>

<script>
import BottomView from 'components/bottom/BottomView.vue'

export default {
  components: {
    BottomView
  },
  data() {
    return {
      menulist: [
        { id: 1, routername: "首页", routeraddress: "/home" },
        { id: 2, routername: "个人资料", routeraddress: "/myinfo/myuserinfo" },
        { id: 3, routername: "账号设置", routeraddress: "/myinfo/mypass" },
        { id: 4, routername: "会员中心", routeraddress: "/myinfo/levelup" },
        { id: 5, routername: "订单详情", routeraddress: "/myinfo/myorder" },
        { id: 6, routername: "我的收藏", routeraddress: "/myinfo/cart" },
      ],
      currentindex: 1,
    };
  },
  methods: {
    chooseitem(index) {
      this.currentindex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #000;

  display: block;
}

.my-user-info-body {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #eee;
  box-sizing: border-box;
}
.my-user-menu-ul {
  // background-color: red;
  padding-top: 5%;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.my-user-menu-ul li {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}
.my-user-menu-ul li:hover {
  background-color: #ddd;
}
.chooseindex {
  background-color: #ddd;
}
.my-user-center {
  max-width: 1200px;
  margin: 10px auto 0;
  display: flex;
  box-sizing: border-box;
}
.my-user-left {
  min-width: 20%;
  height: 100%;
  background-color: #fff;
  box-shadow: 3px 0 15px #ccc;
  margin-right: 10px;
  position: sticky;
  top: 0px;
  z-index: 10;
  /* position: fixed; */
}
.my-user-center-right{
  width: 80%;
}
@media screen and (max-width: 768px) {
  .my-user-info-body {
    padding: 10px;
    padding-top: 0;
    .my-user-center {
      flex-direction: column;
      .my-user-left {
        width: 100%;
        // margin-bottom: 10px;
        .my-user-menu-ul {
          // display: flex;
          flex-direction: row;
          padding-top: 0;
          // background-color: red;
          justify-content: space-around;
          li {
            flex:1;
            padding:0 5px;
            font-size: 12px;
          }
        }
      }
      .my-user-center-right {
        width: 100%;
      }
    }
  }
}
</style>